<template>
        <div shadow="hover">
            <div ref="echarts1" style="height: 300px;width: 350px;"></div>
        </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {}
    },
    mounted() {
        const echarts1 = echarts.init(this.$refs.echarts1)
        var data = [
            {
                value: 1.23,
                name: ' React',
            },
            {   
                value: 2.78,
                name: 'vue',
            },
            {
                value: 1.67,
                name: 'Spring全家桶',
                
            },
            {
                value: 1.16,
                name: 'ios app开发',
            },
            ];
            let datum = data.map((v) => v.value);
            let color = ['#27D099', '#B458F5', '#FCD54B', '#5684F4'];
            let data1 = data[0].value + data[1].value + data[2].value + data[3].value;
            let baseData = [];
            for (var i = 0; i < data.length; i++) {
                baseData.push({
                    value: data[i].value,
                    name: data[i].name,
                    itemStyle: {
                        normal: {
                            borderWidth: 30,
                            shadowBlur: 20,
                            borderColor: color[i],
                            borderRadius: 20,
                        },
                    },
                });
            }
            var option = {
                title: {
                    text: `{b|开发框架占比                        单位 / 万}`,
                    textStyle: {
                        rich: {
                            b: {
                                fontSize: 15,
                                color: 'white',
                            },
                        },
                    },
                    top: '5%',
                    left: '8%',
                },
                color: color,
                tooltip: {
                    show: true,
                    trigger: 'item',
                    formatter: '{b} <br/>占比：{d}%',
                },
                legend: {
                    orient: 'vertical',
                    left: 210,
                    top: 80,
                    itemGap: 20,
                    itemWidth: 13,
                    // color:'#fff',
                    formatter: function (name) {
                        for (var i = 0; arguments.length; i++) {
                            if (name == 'vue') {
                                i = 1;
                            } else if (name == 'Spring全家桶') {
                                i = 2;
                            } else if (name == 'ios app开发') {
                                i = 3;
                            }
                            return `{a|${name}}  {b${i}|${datum[i]}}  `;
                        }
                    },
                    textStyle: {
                        color:'#fcb45a',
                        rich: (function () {
                            return {
                                b0: {
                                    fontSize: 16,
                                    fontWeight: 'bold',
                                    color: color[0],
                                },
                                b1: {
                                    fontSize: 16,
                                    fontWeight: 'bold',
                                    color: color[1],
                                },
                                b2: {
                                    fontSize: 16,
                                    fontWeight: 'bold',
                                    color: color[2],
                                },
                                b3: {
                                    fontSize: 16,
                                    fontWeight: 'bold',
                                    color: color[3],
                                },
                            };
                        })(),
                    },
                },
                grid: {
                    // top: 'bottom',
                    left: 10,
                    bottom: 10,
                    // width: '80%',
                    // height: '80%',
                },
                series: [
                    {
                        zlevel: 1,
                        // name: '外来车辆分类统计',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [50, 90],
                        center: ['30%', '50%'],
                        startAngle: 60,
                        // hoverAnimation: false,
                        label: {
                            normal: {
                                position: 'inside',
                                show: true,
                                color: '#fff',
                                formatter: function (params) {
                                    return params.percent.toFixed() + '%';
                                },
                                rich: {
                                    b: {
                                        fontSize: 13,
                                        lineHeight: 10,
                                        color: '#fff',
                                    },
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                shadowColor: 'rgba(0, 0, 0, 0.2)',
                                shadowBlur: 10,
                            },
                        },
                        data: baseData,
                    },
                    {
                        name: '',
                        type: 'pie',    
                        selectedMode: 'single',
                        radius: [50, 90],
                        center: ['30%', '50%'],
                        startAngle: 60,
                        // data: [
                        //     {
                        //         value: data1,
                        //         name: '',
                        //         label: {
                        //             normal: {
                        //                 show: true,
                        //                 formatter: '{c|{c}辆} \n {a|本日外来\n车辆总数}',
                        //                 rich: {
                        //                     c: {
                        //                         color: '#000',
                        //                         fontSize: 20,
                        //                         fontWeight: 'bold',
                        //                         lineHeight: 2,
                        //                         align: 'center',
                        //                         padding: [30, 0, 30, 0],
                        //                     },
                        //                     a: {
                        //                         align: 'center',
                        //                         color: 'rgb(98,137,169)',
                        //                         fontSize: 12,
                        //                         padding: [16, 0, -10, -10],
                        //                     },
                        //                 },
                        //                 position: 'center',
                        //             },
                        //         },
                        //     },
                        // ],
                    },
                ],
            };
        echarts1.setOption(option)
    }
};
</script>
<style scoped>

</style>